<template>
  <div class="myBasePan">
    <div class="titlePan" >
      我的
    </div>
    <div style="height:20px" ></div>
    <div class="logoPan" >LOGO</div>
    <div style="height:5px;" ></div>
    <div class="namePan" >用户名</div>
    <div style="height:20px;" ></div>
    <hr />
    <div style="height:20px;" ></div>
    <div class="menuItem" @click="yueduiInHandleGo" >
      <div class="iconPan" >
        <audio-outlined />
      </div>
      <div class="ContentPan" >
        乐队入驻
      </div>
      <div class="morePan" >
        <right-outlined />
      </div>
    </div>
    <div class="myBtnPan" >
      <a-button style="width:100%" type="primary" @click="loginOut" >退出登录</a-button>
    </div>
    <a-modal style="top: 0px" v-model:visible="yueduiInVisible" title="乐队入驻" @ok="yueduiInHandleOk">
      <div>
        <a-form 
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        name="yuyueForm"
        >
          <a-form-item label="乐队logo" >
             <a-input />
          </a-form-item>
           <a-form-item label="乐队名称" >
            <a-input></a-input>
          </a-form-item>
           <a-form-item label="乐队介绍" >
            <a-textarea :auto-size="{ minRows: 2, maxRows: 5 }" ></a-textarea>
          </a-form-item>
          <a-form-item label="乐队歌曲" >
            <a-input></a-input>
          </a-form-item>
        </a-form>
      </div>
      <template #footer>
        <a-button key="submit" type="primary" :loading="loading" @click="yueduiInHandleOk">
          提交
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useSystemStoreOut } from '@/store/modules/bottomMenu';
import { AudioOutlined, RightOutlined } from '@ant-design/icons-vue';
import { NowUserName } from '@/utils/cacheEnum'
import { useRouter } from 'vue-router';
<audio-outlined />
export default defineComponent({
  name: 'MyInfo',
  components:{
    AudioOutlined,
    RightOutlined
  },
  setup(){
    const systemStore = useSystemStoreOut();
    systemStore.setBottomIndex(1);
    const router = useRouter();
    const loginOut=()=>{
      sessionStorage.removeItem(NowUserName);
        router.replace({
            path: '/',
            name: 'Home',
        });
    };
    const yueduiInVisible = ref(false);
    const yueduiInHandleGo = () => {
      yueduiInVisible.value = true;
    };
    const yueduiInHandleOk = () => {
      yueduiInVisible.value = false;
    };
    return {
      loginOut,
      yueduiInVisible,
      yueduiInHandleOk,
      yueduiInHandleGo,
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .myBasePan {
    .titlePan{
      width: 100%;
      height: 50px;
      border: solid 1px rgb(241, 243, 244);
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      line-height: 40px;
    }
    .logoPan {
        border: solid 1px rgb(95, 99, 104);
        border-radius: 50px;
        width: 80px;
        height: 80px;
        line-height: 80px;
        margin: 0 auto;
        background-color: rgb(104, 142, 255);
        color: white;
        text-align: center;
    }
    .namePan{
      width: 100%;
      text-align: center;
      font-size: 15px;
    }
    .myBtnPan{
      width: 80%;
      margin: 0 auto;
      position: absolute;
      bottom: 80px;
      left: 10%;
    }
    .menuItem{
      width: 94%;
      margin: 0 auto;
      border-bottom: solid 1px rgb(241, 243, 244);
      padding: 5px;
      display: flex;
      font-size: 20px;
      flex-direction: row;
      .iconPan{
        width: 10%;
      }
      .ContentPan{
        width: 80%;
      }
      .morePan{
        width: 10%;
        text-align: center;
      }
    }
  }
  :deep(.ant-picker){
    width: 100%;
  }
</style>
